{% extends 'base.html' %}
{% load static %}
{% load my_filters_and_tags %}
{% load comment_tags %}
{% load friendship_tags %}

{% block css %}

    <!-- Begin emoji-picker Stylesheets -->
    <link href="{% static 'plugin/emoji_jQuery/lib/css/nanoscroller.css' %}" rel="stylesheet">
    <link href="{% static 'plugin/emoji_jQuery/lib/css/emoji.css' %}" rel="stylesheet">
    <!-- End emoji-picker Stylesheets -->

    <style>
        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .modal {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .spinner-grow {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

        　

    </style>
{% endblock %}

{% block content %}

    <!-- 全局遮罩 -->
    <div class="modal" id="loadingModal" style="display:none;">
        <div class="spinner-grow" role="status" style="float: inside">
            <span class="sr-only">Loading... </span>
        </div>
    </div>

    <div class="py-4">
        <div class="container" style="margin-top: 50px">
            <div class="row">
                <!-- Main Content -->

                <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                    <!-- 发布心情开始 -->

                    <form id="moodForm" method="POST" enctype="multipart/form-data">

                        <p>
                            <a class="btn btn-primary" data-toggle="collapse" href="#sendMood" role="button"
                               aria-expanded="false" aria-controls="collapseExample" style="width: 100%">
                                + Share your mood
                            </a>
                        </p>

                        <div class="collapse" id="sendMood">
                            <div class="card">
                                {% csrf_token %}
                                <div class="box border rounded bg-white">
                                    {% for field in intro_form %}
                                        {% if field.name == 'intro' %}
                                            <div class="tab-content" id="myTabContent">
                                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                                     aria-labelledby="home-tab">
                                                    <div class="p-3 d-flex align-items-center w-100 min-vh-15" href="#">

                                                        <div class="w-100 " style="">
                                                            <!--
                                                            <textarea placeholder="写下你的心情 ......"
                                                                      class="form-control border-0 p-0 shadow-none min-vh-15"
                                                                      rows="1"></textarea>
                                                            -->
                                                            {{ field }}
                                                            <div class="weui_textarea_counter"><span id="count">0</span>/150
                                                            </div>
                                                            <span class="error-msg">{{ field.errors.0 }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}

                                    {% endfor %}


                                    <div class="border-top p-3 d-flex align-items-center">

                                        <div class="mr-auto">
                                            <!--上传图片-->

                                            <div id="cupload"></div>

                                        </div>

                                        <div class="flex-shrink-1">
                                            {% for field in intro_form %}
                                                {% if field.name == 'is_public' %}
                                                    <button type="button"
                                                            class="btn btn-light btn-sm">{{ field }}</button>
                                                {% endif %}
                                            {% endfor %}

                                            <button id="btnSubmit" type="button" class="btn btn-primary btn-sm"
                                                    name="action-publish" value="action-publish"
                                                    data-clicked-text="正在发布...">
                                                <i class="feather-send"></i> 发 布
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                        </div>
                    </form>
                    <!-- 发布心情结束 -->

                    <!--
                    <div class="box shadow-sm border rounded bg-white mb-3 osahan-post">
                        <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                            <div class="dropdown-list-image mr-3">
                                <img class="rounded-circle" src="img/p5.png" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold">
                                <div class="text-truncate">Tobia Crivellari</div>
                                <div class="small text-gray-500">Product Designer at askbootstrap</div>
                            </div>
                            <span class="ml-auto small">3 hours</span>
                        </div>
                        <div class="p-3 border-bottom osahan-post-body">
                            <p class="mb-0">Tmpo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                nostrud exercitation ullamco <a href="#">laboris consequat.</a></p>
                        </div>
                        <div class="p-3 border-bottom osahan-post-footer">
                            <a href="#" class="mr-3 text-secondary"><i class="feather-heart text-danger"></i> 16</a>
                            <a href="#" class="mr-3 text-secondary"><i class="feather-message-square"></i> 8</a>
                            <a href="#" class="mr-3 text-secondary"><i class="feather-share-2"></i> 2</a>
                        </div>
                        <div class="p-3">
                            <button type="button" class="btn btn-outline-primary btn-sm mr-1">Awesome!!</button>
                            <button type="button" class="btn btn-light btn-sm mr-1">😍</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mr-1">Whats it about?</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mr-1">Oooo Great Wow</button>
                        </div>
                    </div>
                    -->

                    <!--
                    <div class="mb-3 shadow-sm rounded box bg-white osahan-slider-main">
                        <div class="osahan-slider">
                            <div class="osahan-slider-item">
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item job-item mr-2 mt-3 mb-3">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">UI/UX
                                                    designer</h6>
                                                <div class="text-truncate text-primary">Envato</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> India,
                                                    Punjab
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="img/l1.png" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle d-flex">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p1.png" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p2.png" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p3.png" alt=""
                                                     data-original-title="Julia Cox">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p4.png" alt=""
                                                     data-original-title="Robert Cook">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p5.png" alt=""
                                                     data-original-title="Sophia Lee">
                                            </div>
                                            <span class="font-weight-bold text-primary">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days
                                                ago</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="osahan-slider-item">
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item job-item mr-2 mt-3 mb-3">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">.NET
                                                    Developer</h6>
                                                <div class="text-truncate text-primary">Invision</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> London, UK
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="img/l4.png" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle d-flex">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p13.png" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p1.png" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p2.png" alt=""
                                                     data-original-title="Julia Cox">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p3.png" alt=""
                                                     data-original-title="Robert Cook">
                                            </div>
                                            <span class="font-weight-bold text-primary">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days
                                                ago</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="osahan-slider-item">
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item job-item mr-2 mt-3 mb-3">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">Channel Sales
                                                    Director</h6>
                                                <div class="text-truncate text-primary">Slack Inc.</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> London, UK
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="img/l7.png" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle d-flex">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p12.png" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p13.png" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top" title="" src="img/p2.png" alt=""
                                                     data-original-title="Julia Cox">
                                            </div>
                                            <span class="font-weight-bold text-primary">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days
                                                ago</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    -->

                    <!-- 一条心情 -->
                    <div class="infinite-container">
                        {% for item in data %}
                            <div class="box mb-3 shadow-sm border rounded bg-white osahan-post infinite-item">
                                {% if item.author == request.universe.user %}
                                    <div style="float: right; margin-right: 4px; margin-top: 4px">
                                        <div class="btn-group">
                                            <button type="button" class="small" style="border: 0px"
                                                    data-toggle="dropdown" aria-expanded="false">
                                                X
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right small"
                                                 style="min-width: 50px">
                                            <span class="ml-auto small">
                                                <a class="btn-sm small dropdown-item"
                                                   href="{% url 'mood_delete' mood_id=item.id %}">删除
                                                    <i class="bi bi-emoji-dizzy"
                                                       style="font-size: 1rem; color: #cb2027"></i>
                                                </a>
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                {% else %}
                                    <div style="float: right; margin-right: 4px; margin-top: 4px">
                                        <div class="btn-group">
                                            <a href="{% url 'mood_detail' item.id %}" class="text-secondary"
                                               target="_blank">
                                                <i class="bi bi-arrow-90deg-right small"></i>
                                            </a>
                                        </div>
                                    </div>
                                {% endif %}

                                <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{{ item.author.avatar.url }}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold" style="width: 100%">

                                        <div class="text-truncate">
                                            {{ item.author.username }}
                                            {% if request.universe.user != item.author %}
                                                <div style="float: right;">{% which_friendship request item.author %}</div>
                                            {% else %}
                                                <div style="float: right">我发布的({{ item.get_is_public_display }})
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="small text-gray-500" id="main">
                                            <div style="float:left;">{{ item.author.motto }}</div>
                                            <div id="right"
                                                 style="float:right; margin-right: 3px">{{ item.create_datetime|timesince_zh }}</div>
                                        </div>
                                    </div>

                                </div>

                                <div class="p-3 border-bottom osahan-post-body">
                                    <!-- 心情内容 -->
                                    <div style="width: 100%; word-wrap:break-word; font-size: 18px; ">
                                        <p> {{ item.intro|linebreaks }} </p>
                                        <!-- |linebreaks 保留换行符-->
                                    </div>
                                    <!-- 心情图片 -->
                                    <div>
                                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                            <ol class="carousel-indicators">
                                                {% if item.get_images.count > 1 %}
                                                    {% for x in item.get_images.count|get_range %}
                                                        <li data-target="#carouselExampleIndicators"
                                                                {% if forloop.counter == 1 %}
                                                            class="active"
                                                                {% endif %}
                                                            data-slide-to="{{ x }}"></li>
                                                    {% endfor %}
                                                {% endif %}
                                            </ol>
                                            <div class="carousel-inner">
                                                {% for img in item.get_images %}
                                                    <div class="carousel-item {% if img == item.get_images.0 %} active {% endif %}">
                                                        <img src="{{ img.thumbnail_url }}"
                                                             class="img-fluid"
                                                             alt="Responsive image"
                                                             style="width: 100%; display: block; max-width: 100%; height: auto;">
                                                    </div>
                                                {% endfor %}
                                            </div>
                                            {#                                    <button class="carousel-control-prev" type="button"#}
                                            {#                                            data-target="#carouselExampleIndicators" data-slide="prev">#}
                                            {#                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>#}
                                            {#                                        <span class="sr-only">Previous</span>#}
                                            {#                                    </button>#}
                                            {#                                    <button class="carousel-control-next" type="button"#}
                                            {#                                            data-target="#carouselExampleIndicators" data-slide="next">#}
                                            {#                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>#}
                                            {#                                        <span class="sr-only">Next</span>#}
                                            {#                                    </button>#}
                                        </div>
                                    </div>

                                </div>

                                <div class="p-3 osahan-post-footer">
                                    <!-- 点赞开始 -->
                                    <a href="javascript:void(0);" id="like_{{ item.id }}"
                                       class="mr-3 text-secondary" onclick="likeMood('{{ item.id }}')">
                                        <i class="bi bi-heart-fill"
                                                {% for liker in item.get_likers %}
                                                    {% if liker.user == request.universe.user %}
                                           style="color: #cb2027"
                                                    {% endif %}
                                                {% endfor %}></i>
                                        <span id="like_count"> {{ item.like_amount }}</span>
                                    </a>
                                    <!-- 点赞结束 -->

                                    <!-- 评论数 -->
                                    <a href="{% url 'mood_detail' item.id %}" class="mr-3 text-secondary"
                                       target="_blank"><i
                                            class="bi bi-chat-left-dots"></i><span> {% get_comment_count item %}</span></a>

                                    <!-- 点赞头像列表 -->
                                    <div class="d-flex align-items-center p-3">
                                        <div class="overlap-rounded-circle">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p1.png' %}" alt=""
                                                 data-original-title="Sophia Lee">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p2.png' %}" alt=""
                                                 data-original-title="John Doe">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p3.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p4.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p5.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p6.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p7.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p8.png' %}" alt=""
                                                 data-original-title="Robert Cook">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p9.png' %}" alt=""
                                                 data-original-title="Sophia Lee">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p10.png' %}" alt=""
                                                 data-original-title="John Doe">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p11.png' %}" alt=""
                                                 data-original-title="Sophia Lee">
                                            <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                 data-placement="top"
                                                 title="" src="{% static 'img/p1.png' %}" alt=""
                                                 data-original-title="John Doe">
                                            {% for liker in item.get_likers %}
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{{ liker.user.avatar.url }}" alt=""
                                                     data-original-title="John Doe">
                                            {% endfor %}
                                        </div>
                                        <span class="font-weight-bold text-muted">{{ item.like_amount }} likes</span>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>


                    <!-- 分页功能
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    {% if data.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" aria-label="Previous"
                                               href="?page={{ data.previous_page_number }}">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>

                                    {% endif %}
                                    {% for page_num in data.paginator.page_range %}
                                        <li class="page-item">
                                            <a {% if page_num == data.number %} class="page-link curpage page-item"
                                            {% else %} class="page-link"
                                            {% endif %} href="?page={{ page_num }}">{{ page_num }}</a>
                                        </li>
                                    {% endfor %}
                                    {% if data.has_next %}
                                        <li class="page-item">
                                            <a href="?page={{ data.next_page_number }}"
                                               class="page-link" aria-label="Next"><span
                                                    aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                             -->

                    {% if data.has_next %}
                        <a href="?page={{ data.next_page_number }}" class="infinite-more-link"
                           aria-label="Next"></a>
                    {% endif %}

                    <div class="loading" style="display: none;">
                        Loading...
                    </div>
                </main>

                <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                    <div style="position: fixed; width: 265.5px">
                        <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
                            <div class="py-4 px-3 border-bottom">
                                <img src="{{ request.universe.user.avatar.url }}" class="img-fluid mt-2 rounded-circle"
                                     alt="Responsive image" width="130px" , height="130px">
                                <h5 class="font-weight-bold text-dark mb-1 mt-4">{{ request.universe.user.username }}</h5>
                                <p class="mb-2 text-muted">{{ request.universe.user.motto }}</p>
                            </div>
                            <div class="d-flex">
                                <div class="col-6 border-right p-3">
                                    <h6 class="font-weight-bold text-dark mb-1">358</h6>
                                    <p class="mb-0 text-black-50 small">Connections</p>
                                </div>
                                <div class="col-6 p-3">
                                    <h6 class="font-weight-bold text-dark mb-1">85</h6>
                                    <p class="mb-0 text-black-50 small">Views</p>
                                </div>
                            </div>
                            <div class="overflow-hidden border-top">
                                <a class="font-weight-bold p-3 d-block"
                                   href="{% url 'profile' request.universe.user.id %}"> View my profile </a>
                            </div>
                        </div>

                        <!--
                        <div class="box mb-3 shadow-sm rounded bg-white view-box overflow-hidden">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">发布内容统计</h6>
                            </div>
                            <div class="d-flex text-center">
                                <div class="col-6 border-right py-4 px-2">
                                    <h5 class="font-weight-bold text-info mb-1">08 <i class="feather-bar-chart-2"></i>
                                    </h5>
                                    <p class="mb-0 text-black-50 small">last 5 days</p>
                                </div>
                                <div class="col-6 py-4 px-2">
                                    <h5 class="font-weight-bold text-success mb-1">+ 43% <i
                                            class="feather-bar-chart"></i></h5>
                                    <p class="mb-0 text-black-50 small">Since last week</p>
                                </div>
                            </div>
                            <div class="overflow-hidden border-top text-center">
                                <img src="{% static 'img/chart.png' %}" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>

                        <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center">
                            <img src="{% static 'img/job1.png' %}" class="img-fluid" alt="Responsive image">
                            <div class="p-3 border-bottom">
                                <h6 class="font-weight-bold text-dark">Osahan Solutions</h6>
                                <p class="mb-0 text-muted">Looking for talent?</p>
                            </div>
                            <div class="p-3">
                                <button type="button" class="btn btn-outline-primary pl-4 pr-4"> POST A JOB</button>
                            </div>
                        </div>
                        -->
                    </div>
                </aside>
                <!--
                <aside class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
                    <div style="position: fixed; width: 265.5px">
                        <div class="box shadow-sm border rounded bg-white mb-3">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">Today's task</h6>
                            </div>
                            <div class="box-body p-3">
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p8.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Sophia Lee</div>
                                        <div class="small text-gray-500">Student at Harvard
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                               </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p9.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">John Doe</div>
                                        <div class="small text-gray-500">Traveler
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                               </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p10.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Julia Cox</div>
                                        <div class="small text-gray-500">Art Designer
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                               </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p11.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Robert Cook</div>
                                        <div class="small text-gray-500">Photographer at Photography
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                               </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p12.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Richard Bell</div>
                                        <div class="small text-gray-500">Graphic Designer at Envato
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                               </span>
                                </div>
                            </div>
                        </div>
                        <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center overflow-hidden">
                            <img src="{% static 'img/ads1.png' %}" class="img-fluid" alt="Responsive image">
                            <div class="p-3 border-bottom">
                                <h6 class="font-weight-bold text-gold">Osahanin Premium</h6>
                                <p class="mb-0 text-muted">Grow & nurture your network</p>
                            </div>
                            <div class="p-3">
                                <button type="button" class="btn btn-outline-gold pl-4 pr-4"> ACTIVATE</button>
                            </div>
                        </div>
                        <div class="box shadow-sm border rounded bg-white mb-3">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">Today's task
                                </h6>
                            </div>
                            <div class="box-body p-3">
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item mb-3">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">Product
                                                    Director</h6>
                                                <div class="text-truncate text-primary">Spotify Inc.</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> India,
                                                    Punjab
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="{% static 'img/l3.png' %}" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p9.png' %}" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p10.png' %}" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p11.png' %}" alt=""
                                                     data-original-title="Julia Cox">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p12.png' %}" alt=""
                                                     data-original-title="Robert Cook">
                                            </div>
                                            <span class="font-weight-bold text-muted">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days
                                                ago</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">.NET
                                                    Developer</h6>
                                                <div class="text-truncate text-primary">Invision</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> London,
                                                    UK
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="{% static 'img/l4.png' %}" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p13.png' %}" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p1.png' %}" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p3.png' %}" alt=""
                                                     data-original-title="Robert Cook">
                                            </div>
                                            <span class="font-weight-bold text-muted">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days
                                                ago</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>
                -->
            </div>
        </div>
    </div>

{% endblock %}



{% block js %}
    <script src="{% static 'mood/js/cupload.js' %}"></script>   <!-- 上传图片插件 -->
    <script src="{% static 'mood/js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'mood/js/infinite.min.js' %}"></script>      <!-- 无限滚动插件 -->


    <!-- Begin emoji-picker JavaScript -->
    <script src="{% static 'plugin/emoji_jQuery/lib/js/nanoscroller.min.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/tether.min.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/config.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/util.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/jquery.emojiarea.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/emoji-picker.js' %}"></script>
    <!-- End emoji-picker JavaScript -->

    <script type="text/javascript">
        // 页面框架加载完成之后自动执行函数
        $(function () {
            bindClickSubmit();  // 发布心情
            cupload();  // 上传图片
            infiniteScroll();   // 无限滚动
            emoji();    // 添加emoji表情
            cal();  // 计算字数
        });

        function cupload() {
            var cupload = new Cupload({
                ele: '#cupload',
                num: 4, // 上传图片的数量
                width: 40,
                height: 60,
                minSize: 1,
                maxSize: 3072,
            });
        };

        function infiniteScroll() {
            var infinite = new Waypoint.Infinite({
                element: $('.infinite-container')[0],
                onBeforePageLoad: function () {
                    $('.loading').show();
                },
                onAfterPageLoad: function ($items) {
                    $('.loading').hide();
                }
            });
        };

        // 发布心情
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                var $btnSubmit = $('#btnSubmit');
                $btnSubmit.prop('disabled', true); // 禁用发送按钮，避免用户重复点击发送
                $('.error-msg').empty();

                var loadingModal = $("#loadingModal");//全局遮罩层
                loadingModal.attr("style", "display:block");
                loadingModal.modal({backdrop: 'static', keyboard: false});

                // 收集表单中的数据（找到每一个字段）$('#moodForm').serialize()
                // 数据ajax发送到后台
                $.ajax({
                    url: "{% url 'mood' %}",
                    type: "POST",
                    // data: $('#moodForm').serialize()+'&'+$.param({"image_list":imageList}), // 所有字段数据 + csrf token。   添加form表单外的其他参数(+'&'+$.param({"image_list":imageList})
                    data: $('#moodForm').serialize(),
                    dataType: "JSON",
                    traditional: true,
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            // loadingModal.attr("style", "display:none");
                            location.href = res.data;
                            // location.href = location.href //指向本页面，不刷新
                        } else {
                            // loadingModal.attr("style", "display:none");
                            $.each(res.error, function (key, value) {
                                alert(error)
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        };

        function likeMood(mood_id) {
            var $like = $("#like_" + mood_id)
            var like_count = $like.children("#like_count").text()
            $.ajax({
                type: 'POST',
                url: '{% url 'mood_like' %}',
                data: {"mood_id": mood_id},
                dataType: "json",
                global: false,
                success: function (res) {
                    if (res.status) {
                        if (res.data) {
                            // document.getElementById(tdId).innerHTML = "是";
                            // $("#like_" + mood_id).next().css("color", "#cb2027")
                            $like.children(".bi").css("color", "#cb2027");
                            $like.children("#like_count").text(parseInt(like_count) + 1);
                        } else {
                            $like.children(".bi").css("color", "#4c4c4c");
                            $like.children("#like_count").text(parseInt(like_count) - 1);
                        }
                    } else {
                        alertMsg.error("操作失败.");
                    }
                },
                // error: DWZ.ajaxError
            });
        };

        // 关注/取关
        function follow(user_id) {
            var friendshipType = $("#follow_" + user_id);
            $.ajax({
                type: 'GET',
                url: '{% url 'follow' %}',
                data: {"user_id": user_id},
                {#dataType: "json",#}
                global: false,
                success: function (res) {
                    if (res.status) {
                        if (res.friendship == 1) {
                            friendshipType.text("已关注");
                        }
                        if (res.friendship == 2) {
                            friendshipType.text("+回关");
                        }
                        if (res.friendship == 3) {
                            friendshipType.text("互相关注");
                        }
                        if (res.friendship == 0) {
                            friendshipType.text("+关注");
                        }
                    } else {
                        alertMsg.error("操作失败.");
                    }
                },
            });
        };

        function emoji() {
            // Initializes and creates emoji set from sprite sheet
            window.emojiPicker = new EmojiPicker({
                emojiable_selector: '[data-emojiable=true]',
                assetsPath: '{% static 'plugin/emoji_jQuery/lib/img' %}',
                popupButtonClasses: 'bi bi-emoji-sunglasses',
                iconSize: 20,
            });
            // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
            // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
            // It can be called as many times as necessary; previously converted input fields will not be converted again
            window.emojiPicker.discover();
        };

        function cal() {
            var max = 150;
            $('.emoji-wysiwyg-editor').on('input', function () {    // emoji插件改变了textarea内容位置
                var text = $(this).text();
                var len = text.length;
                $('#count').text(len);
            });
        };

    </script>
{% endblock %}